<template>
  <div>
    <el-container>
      <el-header class="header">
        百慕大影城后台管理系统
        <div class="userinfo" v-if="$store.state.user">
          {{this.$store.state.user.nickname}}
          <span @click="logout">[注销]</span>
        </div>
          <div class="userinfo" v-else>
          <span @click="logout">未登录</span>
        </div>
        </el-header>
    <el-container>
      <el-aside class="aside scroll-container" width='200px'>
        <!-- 垂直导航 -->
        <el-menu
        router
        unique-opened
        :default-active="$route.path"
         style="border-right:none"
         background-color="#333" text-color="#eee" active-text-color="#f00">
          <el-submenu index="actor">
             <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span slot="title">演员管理</span>
             </template>
             <el-menu-item index="/home/actor-list">
             <i class="el-icon-menu"></i>
              <span>演员列表</span>
             </el-menu-item>
             <el-menu-item index="/home/actor-add">
             <i class="el-icon-menu"></i>
              <span>新增演员</span>
             </el-menu-item>
          </el-submenu>
          <el-submenu index="director">
             <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span slot="title">导演管理</span>
             </template>
             <el-menu-item index="/home/director-list">
             <i class="el-icon-menu"></i>
              <span>导演列表</span>
             </el-menu-item>
             <el-menu-item index="/home/director-add">
             <i class="el-icon-menu"></i>
              <span>新增导演</span>
             </el-menu-item>
          </el-submenu>
          <el-submenu index="/movie">
             <template slot="title">
                <i class="el-icon-video-camera-solid"></i>
                <span slot="title">电影管理</span>
             </template>
             <el-menu-item index="/home/movie-list">
              <i class="el-icon-menu"></i>
              <span>电影列表</span>
             </el-menu-item>
             <el-menu-item index="/home/movie-add">
              <i class="el-icon-menu"></i>
              <span>新增电影</span>
             </el-menu-item>
          </el-submenu>
                    <el-submenu index="/cinema">
             <template slot="title">
                <i class="el-icon-s-home"></i>
                <span slot="title">影院管理</span>
             </template>
              <el-menu-item index="/home/cinema-list">
              <i class="el-icon-menu"></i>
              <span>影院列表</span>
             </el-menu-item>
             <el-menu-item index="/home/cinema-add">
              <i class="el-icon-menu"></i>
              <span>添加影院</span>
             </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    methods: {
      logout() {
         this.$confirm('此操作将退出登录, 是否继续?', '注意', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调用vuex得方法注销用户
        this.$store.commit('clearUserState')
        this.$router.push('/user/login')
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
        
      }
    },
  }
</script>

<style lang="less" scoped>
 .header{
  background-color: #333;
  color: #fff;
  line-height: 60px;
  font-size: 1.3em;
 }
 .aside{
  background-color: #333;
  height: calc(100vh - 60px);
 }
 .main{
  height: calc(100vh - 60px);
 }
 .el-menu-item.is-active{
  font-weight: bold;
 }
 .userinfo{
  color: white;
  float: right;
  font-size: 18px;
  user-select: none;
 }
  .userinfo span:hover{
     color: #999;
  }
</style>